<!-- 功能：更改登录口令弹窗 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月24日 14:23:00 -->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="更改登录口令" width="500px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span:6 }" :wrapper-col="{span: 14}">
      <a-form-item label="用户名">
        {{loginuser || '未知'}}
      </a-form-item>
      <a-form-item label="旧密码" v-bind="validateInfos.oldPassword">
        <a-input v-model:value="modelRef.oldPassword" placeholder="请输入旧密码"></a-input>
      </a-form-item>
      <a-form-item label="新密码" v-bind="validateInfos.newPassword">
        <a-input-password v-model:value="modelRef.newPassword" placeholder="请输入新密码" @change="changeNewPassword"></a-input-password>
        <a-rate v-model:value="rateValue" count="10" allow-half disabled>
          <template #character>
            <BorderOutlined />
          </template>
        </a-rate>
      </a-form-item>
      <a-form-item label="重复新密码" v-bind="validateInfos.newPasswordAgain">
        <a-input-password v-model:value="modelRef.newPasswordAgain" placeholder="请输入重复新密码"></a-input-password>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const { visible } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  oldPassword: '',
  newPassword: '',
  newPasswordAgain: ''
})

const rulesRef = reactive({
  oldPassword: [
    {
      required: true,
      message: '请输入旧密码'
    }
  ],
  newPassword: [
    {
      required: true,
      message: '请输入新密码'
    }
  ],
  newPasswordAgain: [
    {
      required: true,
      message: '请输入重复新密码'
    }
  ]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      initSystemtoolChangepassword() // 更改密码口令
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}

let rateValue = ref(0)
// 改变新密码
let changeNewPassword = () => {
  var one = /[a-z]/g
  var two = /[0-9]/g
  var three = /(.[^a-z0-9])/g
  let lv = 0

  if (modelRef.newPassword.length == 0) {
  } else if (modelRef.newPassword.length > 0 && modelRef.newPassword.length <= 6) {
    lv = 4
  }
  if (modelRef.newPassword.length > 6) {
    lv = 4
    if (new RegExp(one).test(modelRef.newPassword)) {
      lv += 2
    }
    if (new RegExp(two).test(modelRef.newPassword)) {
      lv += 2
    }
    if (new RegExp(three).test(modelRef.newPassword)) {
      lv += 2
    }
  }
  rateValue.value = lv
}

const loginuser = ref('')
// 获取当前登录的用户
let initSystemtoolGetloginuser = () => {
  apiWs.systemtoolGetloginuser().subscribe(resp => {
    loginuser.value = resp.username
  })
}

//  更改用户的口令
let initSystemtoolChangepassword = () => {
  let params = {
    name: loginuser.value,
    oldpassword: modelRef.oldPassword,
    password: modelRef.newPassword,
    repassword: modelRef.newPasswordAgain
  }
  apiWs.systemtoolChangepassword(params).subscribe(resp => {
    // 成功关闭
    onCancel()
  })
}

onMounted(() => {
  initSystemtoolGetloginuser() // 获取当前的登录用户
})
</script>

<style scoped>
.ant-row {
  margin-bottom: 10px;
}
</style>